<template>
<header>
    欢迎登录
</header>
     <div class="login">
          <el-form
      :label-position="labelPosition"
      label-width="100px"
      :model="formLabelAlign"
      style="max-width: 460px"
    >
      <el-form-item label="姓名">
        <el-input v-model="formLabelAlign.name" />
      </el-form-item>
      <el-form-item label="密码">
        <el-input v-model="formLabelAlign.region" />
      </el-form-item>
      <el-form-item label="手机号">
        <el-input v-model="formLabelAlign.type" />
      </el-form-item>

      <el-form-item>
      <el-button type="primary" @click="submitForm()"
        >Create</el-button
      >
      <el-button @click="resetForm()">Reset</el-button>
    </el-form-item>
    </el-form>
     </div>
    <footer></footer>
   
</template>
<script>
import { reactive,ref, toRefs } from "vue";
import {useRouter} from "vue-router"
export default {
  setup() {
      let router =useRouter()
    let labelPosition = ref("right");
    let data = reactive({
      formLabelAlign: {
        name: " ",
        region: "",
        type: "",
      },
    });
    let submitForm= ()=>{
       sessionStorage.setItem('token','xuanxuan');
       router.push('/main')   
    }
    let resetForm =async()=>{

    }
    return {
      ...toRefs(data),
      labelPosition,
      submitForm
    };
  },
};
</script>
<style lang="less" scoped>

.login{
    background-color: #2b8ef1;
    height: calc(100v - 180px);
    padding: 3% 30%;
}
header{
    width: 60%;
    height: 60px;
    line-height: 60px;
   padding-left: 15%;
   font-size: 18px;
}
footer{
    height: 120px;
}
</style>